<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form action="" method="post">
			<table border="1px" cellspacing="0px" cellpadding="" id="tableStu">
				<tr>
					<td></td>
					<td>姓名</td>
					<td>性别</td>
					<td>年龄</td>
					<td>地址</td>
				</tr>
				<tr>
					<td><input type="checkbox" name="stu" id="" value="0" class="1" /></td>
					<td>王一</td>
					<td>男</td>
					<td>18</td>
					<td>新罗区</td>
				</tr>
				<tr>
					<td><input type="checkbox" name="stu" id="" value="1" class="2" /></td>
					<td>小二</td>
					<td>女</td>
					<td>18</td>
					<td>新罗区</td>
				</tr>
				<tr>
					<td><input type="checkbox" name="stu" id="" value="2" class="1" /></td>
					<td>张三</td>
					<td>男</td>
					<td>18</td>
					<td>新罗区</td>
				</tr>
				<tr>
					<td><input type="checkbox" name="stu" id="" value="3" class="2" /></td>
					<td>李四</td>
					<td>女</td>
					<td>18</td>
					<td>新罗区</td>
				</tr>
			</table>
			<input type="checkbox" name="" onclick="allOption()" id="all" value="" />全选
			<input type="checkbox" name="" onclick="allMan()" id="man" value="" />男
			<input type="checkbox" name="" onclick="allWoman()" id="Woman" value="" />女
		</form>
	</body>
	<script type="text/javascript">
		function allOption(){
			var allStu=document.getElementById('tableStu');
			console.log(allStu);
			var allTableStuInput=document.getElementsByTagName('input');
			console.log(allTableStuInput);
			var allObject=document.getElementById('all');
			console.log(allObject);
			for(var i=0;i<allTableStuInput.length;i++){
				allTableStuInput[i].checked=allObject.checked;
			}
			console.log('全选触发')
		}
		function allMan(){
			var allStu=document.getElementById('tableStu');
			console.log(allStu);
			var allManObject=allStu.getElementsByClassName('1');
			console.log(allManObject);
			var manObject=document.getElementById('man');
		    console.log(manObject);
			for(var i=0;i<allManObject.length;i++){
				allManObject[i].checked=manObject.checked;
			}
		}
		function allWoman(){
			var allStu=document.getElementById('tableStu');
			console.log(allStu);
			var allWomanObject=allStu.getElementsByClassName('2');
			console.log(allWomanObject);
			var WomanObject=document.getElementById('Woman');
		    console.log(WomanObject);
			for(var i=0;i<allWomanObject.length;i++){
				allWomanObject[i].checked=WomanObject.checked;
			}
		}
	</script>
</html>
